<template>
  <div class="cu-common-layout cu-common-renewal">
    <div class="cu-common-layout-center">
      <el-row class="cu-common-search-box" :gutter="16">
        <el-form @submit.native.prevent class="renewal-form1">
          <el-col :span="8">
            <el-form-item label="校区品牌" prop="brand">
              <el-select v-model="query.brand" placeholder="" @change="handleChangeBrand" filterable clearable>
                <el-option :key="item.id" :label="item.fullName" :value="item.enCode" v-for="item in brandOptions" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="校区" prop="campusId">
              <el-select v-model="query.campusId" placeholder="校区" clearable filterable>
                <el-option v-for="(item, index) in campusOptions" :key="index" :label="item.fullName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在区域" prop="area">
              <custom-address v-model="query.area" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="校区状态" prop="status">
              <el-select v-model="query.status" placeholder="" clearable>
                <el-option v-for="(item, index) in statusOptions" :key="item.id" :label="item.fullName" :value="item.enCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="校区类型" prop="type">
              <el-select v-model="query.type" placeholder="" clearable>
                <el-option v-for="(item, index) in typeOptions" :key="item.id" :label="item.fullName" :value="item.enCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应续日期" prop="renewalDate">
              <el-date-picker v-model="query.renewalDate" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="续费状态" prop="isPayed">
              <el-select v-model="query.isPayed" placeholder="" clearable>
                <el-option v-for="(item, index) in isPayedOptions" :key="item.id" :label="item.fullName" :value="item.enCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()" native-type="submit">{{ $t('common.search') }}</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">{{ $t('common.reset') }}</el-button>
            </el-form-item>
          </el-col>
        </el-form>
        <div class="cu-common-search-right">
          <div class="s-r-l">
            <div class="item">
              <span class="s-title">应续费校区</span>
              <div class="s-c-d">
                {{ shouldRenewCount }}
              </div>
            </div>
            <div class="item">
              <span class="s-title">已续费校区</span>
              <div class="s-c-d ">
                {{ alreadyRenewedCount }}
              </div>
            </div>
            <div class="item">
              <span class="s-title">校区续费率</span>
              <div class="s-c-d ">
                {{ renewalRate }}
              </div>
            </div>
          </div>
          <el-button type="text" icon="el-icon-download" @click="handleChangeExport()" v-has="'btn_download'">导出</el-button>
        </div>
      </el-row>
      <div class="cu-common-layout-main cu-flex-main">
        <div class="cu-common-head">
          <div>
            <!--            <el-button type="primary" icon="el-icon-delete" @click="handleBatchRemoveDel()" v-has="'btn_batchRemove'">批量删除</el-button>-->
            <el-button type="text" icon="el-icon-download" @click="exportData()" v-has="'btn_download'">导出</el-button>
          </div>
          <div class="cu-common-head-right">
            <el-tooltip effect="dark" content="刷新" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh cu-common-head-icon" :underline="false" @click="reset()" />
            </el-tooltip>
            <screenfull isContainer />
          </div>
        </div>
        <custom-table v-loading="listLoading" :data="list" @selection-change="handleSelectionChange">
          <el-table-column label="校区名称" prop="shortName" align="left" v-if="custom.hasP('shortName')" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column label="校区编码" prop="code" align="center" v-if="custom.hasP('enCode')" min-width="80"></el-table-column>
          <el-table-column label="校区品牌" prop="brand" align="center" v-if="custom.hasP('brand')" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.brand | dynamicCodeText(brandOptions) }}
            </template>
          </el-table-column>
          <el-table-column label="校区类型" prop="type" align="center" v-if="custom.hasP('type')" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.type | dynamicCodeText(typeOptions) }}
            </template>
          </el-table-column>
          <el-table-column label="校区阶段" prop="levelText" align="center" v-if="custom.hasP('levelText')" min-width="80"></el-table-column>
          <el-table-column label="合作形式" prop="coopMode" align="center" v-if="custom.hasP('coopMode')" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.coopMode == null ? '' : scope.row.coopMode == '1' ? '单校' : '多校' + scope.row.coopMode }}
            </template>
          </el-table-column>
          <el-table-column label="省份" prop="province" align="left" v-if="custom.hasP('provinceId')" show-overflow-tooltip />
          <el-table-column label="城市" prop="city" align="left" v-if="custom.hasP('cityId')" show-overflow-tooltip />
          <el-table-column label="续约费" prop="renewal" align="right" v-if="custom.hasP('renewal')" min-width="80"></el-table-column>
          <el-table-column label="保证金" prop="deposit" align="right" v-if="custom.hasP('deposit')" min-width="80"></el-table-column>
          <el-table-column label="投资人" prop="investors" align="left" v-if="custom.hasP('investors')" width="120" show-overflow-tooltip />
          <el-table-column label="联系电话" prop="investorsPhone" align="left" v-if="custom.hasP('investorsPhone')" show-overflow-tooltip />
          <el-table-column label="续费情况" prop="renewalStatus" align="center" v-if="custom.hasP('type')" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.renewalStatus }} ({{ scope.row.renwelCount ? scope.row.renwelCount : 0 }})</span>
            </template>
          </el-table-column>
          <el-table-column label="最近续费日期" prop="lastRenewal" align="center" v-if="custom.hasP('lastRenewal')" :formatter="custom.tableDateFormat" min-width="100" />
          <el-table-column label="合同记录" prop="contracts" align="center" v-if="custom.hasP('contracts')" min-width="80">
            <template slot-scope="scope">
              <span style="color:#ff5b5b;cursor: pointer;" @click="ContractHandle(scope.row.id)">记录({{ scope.row.contracts ? scope.row.contracts : 0 }})</span>
            </template>
          </el-table-column>
          <el-table-column label="开始日期" prop="startDate" align="center" v-if="custom.hasP('startDate')" :formatter="custom.tableDateFormat" min-width="100" />
          <el-table-column label="截止日期" prop="endDate" align="center" v-if="custom.hasP('endDate')" :formatter="custom.tableDateFormat" min-width="100" />
          <el-table-column label="操作" fixed="right" width="160" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="addOrUpdateHandle(scope.row)" v-has="'btn_renewal'">续费</el-button>
              <el-button v-if="scope.row.status != 'suspended'" type="text" size="mini" v-has="'btn_postpone'" @click="changeStatusHandle(scope.row.id, 'suspended')">暂停</el-button>
              <el-button v-if="scope.row.status != 'close'" type="text" size="mini" class="cu-table-delBtn" v-has="'btn_close'" @click="changeCloseHandle(scope.row, 'close')">闭校</el-button>
            </template>
          </el-table-column>
        </custom-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
      </div>
    </div>
    <close-support-form v-if="closeSupportVisible" ref="CloseSupport" @refresh="refresh" />
    <custom-form v-if="formVisible" ref="CustomForm" @refresh="refresh" />
    <status-box v-if="statusVisible" ref="StatusBox" @refresh="refresh" />
    <contract-form v-if="contractFormVisible" ref="ContractForm" @refresh="refresh" @close="contractFormVisible = false" />
    <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
  </div>
</template>
<script>
export { default } from './index.js'
</script>
<!--<style lang="scss" scoped>-->
<!--@import url(index.scss);-->
<!--</style>-->
<style lang="scss" scoped>
.renewal-form1 {
  display: flex;
  flex-wrap: wrap;
}
.cu-common-renewal {
  .cu-common-search-box {
    display: flex;
  }
  .cu-common-search-right {
    flex-shrink: 0;
    width: 420px;
    display: flex;
    align-items: center;
    .s-r-l {
      display: flex;
      .item {
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .s-title {
          color: #606266;
          font-size: 14px;
        }
        .s-c-d {
          color: #1a92ff;
          font-size: 32px;
          font-weight: bold;
        }
      }
    }
    .el-button {
      margin-left: 40px;
    }
  }
}
</style>
